<template>
  <div>
    <!-- 轮播图 -->
    <div class="swiper" ref="swip" @mousedown="seipBodyMouseDowen($event)" @mouseleave="mLeave" @mouseenter="mEnter">
      <!-- 可移动的轮播图盒子 -->
      <div class="swiperBody" :style="{
        'left': trueLeft + 'px',
        'transition': runtime && jb ?  'left 1s ease' : 'none'
      }">
      <!-- 图片位置 -->
          <template v-for="item,index in imgArr1">
              <div class="sitem" :style="{
                'backgroundImage':'url('+item+')',
                'width':swipWidth+'px'}" 
                :key="index"></div>
          </template>
      </div>
      <!-- 小圆点 -->
        <div class="pointer" ref="pointer">
          <template v-for="item,index in imgArr">
            <span class="span" :class="{'active': runNun1==index}" :key="index" @click="setSwip(index)"></span>
          </template>
        </div>
    </div>
    
  </div>
  </template>

<script>
export default {
  name: 'MySwiper',
  data(){
      return {
          timmer1: null,//该定时器配合runtime使用
          timmer2: null,//自动轮播
          runtime:false,//避免短时间内多次重复点击
          imgArr1:[],//使用imgArr1重新编排传入的imgArr图片数组，用于无缝衔接切换
          runNun: 0,//
          runNun1: 0,//用于控制小圆点聚焦(如果使用runNun则无缝衔接时聚焦有延迟)
          swipWidth: 0,//轮播图宽度
          trueLeft: 0,//
          muveNum: 0,//鼠标每次拖拽的距离
          jb: true//无缝衔接时的不需要动画
      }
  },
  props: {
    imgArr:{
      type: Array,
      require: true,
    }
  },
  computed:{
    computLeft(){
        return - this.swipWidth * (this.runNun+1);
    }
  },
  beforeMount(){
    // 无缝衔接精髓
    this.imgArr1 = this.imgArr.concat([]);
    this.imgArr1.push(this.imgArr[0]);
    this.imgArr1.unshift(this.imgArr[this.imgArr.length-1]);
  },
  mounted(){
    this.swip = this.$refs.swip;
    this.swipWidth = this.swip.offsetWidth;
    document.addEventListener('mouseup',this.mouseupControl)

    this.swiperAuto();
  },
  methods:{
    run(tag){//切换
      this.jb = true;
      if(this.runtime) return;
      if(tag=='+'){//下一张
        this.runNun++;
        this.runNun1++;
        if(this.runNun==this.imgArr.length){//最后一张
          this.runNun1 = 0;
          setTimeout(()=>{//无缝精髓
            this.jb = false;
            this.runtime = false;
            this.runNun = 0;
          },1000);
          // 
        }
      }else if(tag=='-'){//上一张
        this.runNun--;
        this.runNun1--;
        if(this.runNun==-1){//第一张
          this.runNun1 = this.imgArr.length-1;
          setTimeout(()=>{//无缝精髓
            this.jb = false;
            this.runtime = false;
            this.runNun = this.imgArr.length-1;
          },1000);
        }
      }else{
         this.trueLeft = this.computLeft;
         this.runTimeControl();
      }
    },
    setSwip(index){//点击小圆点
      this.runNun = index;
      this.runNun1 = index;
    },
    seipBodyMouseDowen(e){//拖拽切换
      if(this.runtime){
        this.swip.onmousemove = null;
        return '';
      }
      var dowenPositionX = e.screenX;
      this.swip.onmousemove = (e1)=>{

        var movePositionX = e1.screenX;
        this.muveNum = movePositionX - dowenPositionX;
        this.trueLeft = this.computLeft + this.muveNum;
      }
    },
    runTimeControl(){//轮播图动画切换中
      this.runtime = true;
      clearTimeout(this.timmer1);
      this.timmer1 = setTimeout(()=>{
        this.runtime = false;
      }, 1000);
    },
    mouseupControl(){
      this.swip.onmousemove = null;
      if(this.muveNum>0 && this.muveNum > this.swipWidth*0.2){
        this.run('-')
      }else if(this.muveNum < 0 && this.muveNum*-1 > this.swipWidth*0.2){
        this.run('+')
      }else{
         this.run()
      }
    },
    mLeave(){
     this.swiperAuto();
    },
    mEnter(){
      clearInterval(this.timmer2);
    },
    swiperAuto(){
      this.timmer2 = setInterval(()=>{
        this.run('+')
      },3500);
    }
  },
  beforeDestroy(){
    document.onmouseup = null;
  },
  watch:{
    computLeft(newVal){//使用trueLeft控制轮播图而不是computLeft，是因为拖拽时会冲突
      this.trueLeft = newVal;
      this.runTimeControl();
    }
  }
}
</script>
<style scoped>
  .swiper{
    position: relative;
    width: 100%;
    margin: 20px auto;
    height: 450px;
    overflow: hidden;
    border: 1px solid #ccc;
    box-sizing: border-box;
    user-select: none;
  }
  .swiperBody{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    white-space: nowrap;
    min-width: 100%;
  }
  .swiperBody .sitem{
    display: inline-block;
    height: 100%;
    background-position: center center;
    background-origin: padding-box;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .pointer{
    height: 6px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 20px;
    z-index: 2;
    text-align: center;
    font-size: 0;
  }
  .pointer .span{
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #fff;
    border-radius: 50%;
    margin: 0 10px;
    cursor: pointer;
  }
  .pointer .span.active{
    background-color: rgb(248, 123, 7);
  }
</style>